<html>
<head>
<title>Test z-index</title>
<script  type="text/javascript" language="JavaScript">
  function changeZunder() {
    layer1.style.zIndex = 1;
    layer2.style.zIndex = 2;
  }

  function changeZover() {
    layer1.style.zIndex = 2;
    layer2.style.zIndex = 1;
  }
</script>
</head>
<body>
<div id="layer1" style="position: absolute; left: 50px; top: 50px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #0000FF; background-color: #00FF00; z-index: 1">This is blue text with a green background.</div>
<div id="layer2" style="position: absolute; left: 50px; top: 50px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #FF0000; background-color: #000000; z-index: 1">This is red text with a black background.</div>
<div id="layer3" style="position: absolute; left: 150px; top: 300px; padding: 50 50 50 50; width: 100px; z-index: 1">
  <button onClick="changeZunder()">changeZunder()</button>  <button onClick="changeZover()">changeZover()</button>
</div>
</body>
</html>